<!DOCTYPE html>
<html>
<head>
	<title>js伪元素点击事件实现的两种方法</title>
	<style type="text/css">
		.solv-1, .solv-2 {
			width: 40%;
			float: left;
			margin: 22px;
		}
		.item-1, .item-2 {
			width: 50px;
			height: 50px;
			border-radius: 5px;
			background: #fafafa;
			position: relative;
		}
		.item-1::before, .item-2::before {
			content: 'x';
			display: inline-block;
			width: 20px;
			height: 20px;
			border-radius: 20px;
			border: solid 2px #fff;
			background: #FF0000;
			line-height: 18px;
			text-align: center;
			color: #fff;
			transform: scale(0.5, 0.5);
			position: absolute;
			right: -10px;
			top: -10px;
			cursor: pointer;
		}
		.item-1 {
			pointer-events: none;
		}
		.item-1::before {
			pointer-events: auto;
		}

		.item-2 img {
			border-radius: 5px;
		}
	</style>
</head>
<body>
	<div class="solv-1">
		<p>
			一种是：元素本身：pointer-events: none;禁用点击事件
        其伪元素通过pointer-events: auto;启用点击事件，使鼠标只能点击到伪元素
		</p>
		<p>
			这种实现方式只能是绑定一个事件，如点击图片实现查看，点击伪元素实现删除则不可以实现。而且会导致:hover等鼠标事件失效，所以不推荐使用
		</p>
		<div class="item-1" onclick="del1()"></div>
	</div>

	<div class="solv-2">
		<p>
			第二种是：通过子元素的事件冒泡原理，在子元素事件处理结束后return false，告知父元素事件处理完毕。这样只就屏蔽了父元素接收事件，然后:after伪元素是悬浮在子元素上面的，故点击伪元素的时候触发父元素事件。
		</p>
		<div class="item-2" onclick="del2()">
			<img id="avatar" src="https://avatar.csdn.net/5/1/F/3_a486259.jpg" width="50" height="50" alt="" />
		</div>
	</div>

	<script type="text/javascript">
		function del1 () {
			alert('点击到了删除事件')
		}

		var avatarEl = document.getElementById('avatar')
		avatarEl.onclick = function selImg (e) {
			e.stopPropagation()
			alert('选中了图片')
			return false
		}

		function del2 () {
			alert('点击到了删除事件2')
		}
	</script>
</body>
</html>

